import React from 'react';
import { Form, Select, Input, Row, Col, DatePicker, message, Button } from "antd";
import stafDetailData from '@/staticLists/stafDetailData';
import { useDispatch } from "umi"
import UploadComp from '@/components/UploadComponent/UploadComp';
import zhCn from "antd/es/locale/zh_CN";
import DrowPover from "@/components/DropPopover";
import { mapData } from '@/utils/mapData';
import moment from 'moment';
import $http from "@/services";
import { staffRule } from '@/utils/rules/staffRule';

export default function AddStaffForm({ addStaffFn }) {
  const [form] = Form.useForm();
  // 创建Selector 中的Option
  const createOption = (arr) => {
    return arr.map((el, index) => {
      return {
        label: el,
        value: index
      }
    })
  }

  //- 用户名密码的检测
  const beforeChecked = async (item) => {
    if (item.itemName !== 'accountName' || item.itemName !== 'mobile') return;

    const reqData = await form.validateFields([item.itemName]);
    const { data, msg } = await $http.checkIsExists({ checkData: reqData });

    if (data) {
      form.setFieldsValue({ [item.itemName]: '' });
      return message.error(msg);
    }
  };


  const addStaffValue = async () => {
    try {
      const res = await form.getFieldsValue();
      await form.validateFields();
      delete res.departmentName;
      delete res.levelName;
      const { code, msg } = await $http.createStaff(res);
      if (code) return message.error(msg);
      message.success(msg);
      addStaffFn();

    } catch (err) {
      message.warn("表单填写错误,请进行重新填写!")
    }
  }

  const getNewAvatar = (avatar) => {
    form.setFieldValue('avatar', avatar);
  }
  const getNewValue = (item) => {
    const name = item.itemName + 'Name';
    console.log({
      [item.itemName]: item._id,
      [name]: item[name]
    })
    form.setFieldsValue({
      [item.itemName]: item._id,
      [name]: item[name]
    })
  }
  // 创建节点
  const createDetailNode = {
    input(item) {
      return (<Input
        placeholder={item.initVal}
        type={item.itemName === "password" ? "password" : "text"}
        onBlur={() => beforeChecked(item)}
      ></Input>)
    },
    date(item) {
      return <DatePicker style={{ width: "100%" }} locale={zhCn} placeholder={item.initVal}></DatePicker>
    },
    select(item) {
      const arr = mapData[item.itemName];
      return <Select options={createOption(arr)}></Select>
    },
    popover(item) {

      return <Input
        readOnly
        placeholder={item.initVal}
        addonAfter={<DrowPover
          placeValue={item.initVal}
          searchType={item.itemName}
          getnewValue={getNewValue}
          interfaced={item.interfaced}></DrowPover>} ></Input>
    },
    upload(item) {
      return (<UploadComp getNewAvatar={getNewAvatar}></UploadComp>)
    }
  }

  return (
    <Form
      layout='vertical'
      form={form}
    >
      {stafDetailData.map((el, index) => {
        return (<Row justify={"space-between"} key={index}>
          {el.map((item, childIndex) => {
            return (<Col span={11} key={childIndex} style={{ ...item.style }}>
              <Form.Item
                label={item.labelTxt}
                name={item.itemName}
                rules={staffRule[item.itemName]}
              >
                {createDetailNode[item.renderType](item)}
              </Form.Item>
            </Col>)
          })}
        </Row>)
      })}
      <Row>
        <Col span={24}>
          <Form.Item>
            <Button type="primary" htmlType='submit' onClick={addStaffValue}>创建</Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}
